<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    li{
      list-style: none;
    }
    .top{
      height: 55px;
      background-color:#888888;
    }
    .banner{
      margin: 10px auto;
      background-color: #888888;
      height: 100px;
      width:1000px;
    }
    .box{
      width: 1200px;
      margin: 0 auto;
      height: 500px;
      background-color: #888888;
    }
    .footer{
      background-color:#888888;
      height: 80px;
      margin-top: 10px;
    }
    .box li{
      height: 220px;
      width: 570px;
      background-color: #b3d4fc;
      float: left;
      margin-left: 20px;
      margin-bottom: 20px;
    }
    .box .t1{
      margin-top: 20px;
    }
  </style>
</head>
<body>
<div class="top"></div>
<div class="banner"></div>
<div class="box">
  <ul>
    <li class="t1">1</li>
    <li class="t1">2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>
<div class="footer"></div>
</body>
</html>
